import 'package:flutter/material.dart';
import 'package:flutter_easyloading/flutter_easyloading.dart';
import 'package:mall/core/models/bank.dart';
import 'package:mall/core/providers/pages/mine/manage/bank_update_model.dart';
import 'package:mall/core/providers/view_model.dart';
import 'package:mall/components/login_button.dart';
import 'package:mall/screens/address/address_region_page.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:mall/screens/manage/bank_type_page.dart';
import 'package:provider/provider.dart';

class BankEditPage extends StatelessWidget {
  static const routeName = '/BankEditPage';
  final Bank args;

  BankEditPage({
    Key key,
    @required this.args,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
      create: (context) => BankUpdateModel(Provider.of(context, listen: false), args),
      child: Scaffold(
        appBar: AppBar(
          title: Text(args == null ? '添加银行账户' : '更新银行账户'),
        ),
        body: _BodyWidget(),
      ),
    );
  }
}

class _BodyWidget extends StatelessWidget {
  const _BodyWidget({
    Key key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    BankUpdateModel model = Provider.of(context);
    return SingleChildScrollView(
      child: Column(
        children: <Widget>[
          Divider(height: 1),
          _SelectItemWidget(
            title: '账号类型：',
            hint: model.type == null ? '选择' : model.type.value,
            onTap: () => _onSelectClicked(context),
          ),
          Divider(height: 1),
          _EditItemWidget(
            title: '银行账号：',
            initial: model.bankCardId,
            hint: '输入账号',
            onChanged: (value) => model.bankCardId = value,
          ),
          Divider(height: 1),
          _EditItemWidget(
            title: '姓名：',
            initial: model.cardOwnerName,
            hint: '输入姓名',
            onChanged: (value) => model.cardOwnerName = value,
          ),
          Divider(height: 1),
          _EditItemWidget(
            title: '开户总行：',
            initial: model.mainBankName,
            hint: '例如：中国工商银行',
            onChanged: (value) => model.mainBankName = value,
          ),
          Divider(height: 1),
          _EditItemWidget(
            title: '开户支行：',
            initial: model.bankName,
            hint: '输入开户支行，必须完整',
            onChanged: (value) => model.bankName = value,
          ),
          Divider(height: 1),
          _SelectItemWidget(
            title: '省市区县：',
            hint: model.county == null ? '选择' : model.county.value,
            onTap: () async {
              var result = await Navigator.of(context).pushNamed(
                AddressRegionPage.routeName,
                arguments: AddressRegionArgs(0, null),
              );
              debugPrint('result = $result');
              if (result != null) {
                BankUpdateModel bankUpdateModel = Provider.of(context, listen: false);
                bankUpdateModel.county = result;
              }
            },
          ),
          Divider(height: 1),
          Container(
            alignment: Alignment.center,
            color: Colors.white,
            child: SwitchListTile(
              value: model.defaultAccount ?? false,
              onChanged: (value) {
                model.defaultAccount = value;
              },
              title: Text(
                '设为默认银行卡',
                style: TextStyle(color: Color(0xFF181818), fontSize: 17),
              ),
            ),
          ),
          Container(
            child: Builder(
              builder: (context) {
                return model.viewState == ViewState.busy
                    ? LoginButton.busy()
                    : LoginButton(
                        title: '确认提交',
                        function: () => _onConfirmClicked(context),
                      );
              },
            ),
          ),
        ],
      ),
    );
  }

  void _onSelectClicked(BuildContext context) async {
    var mapEntry = await Navigator.of(context).pushNamed(BankTypePage.routeName);
    if (mapEntry != null) {
      BankUpdateModel bankUpdateModel = Provider.of(context, listen: false);
      bankUpdateModel.type = mapEntry;
    }
  }

  void _onConfirmClicked(BuildContext context) async {
    BankUpdateModel bankUpdateModel = Provider.of(context, listen: false);
    ViewState viewState = await bankUpdateModel.bankUpdate();
    switch (viewState) {
      case ViewState.error:
        EasyLoading.showToast(bankUpdateModel.errorMessage);
        break;
      default:
        Navigator.of(context).pop(true);
        break;
    }
  }
}

class _SelectItemWidget extends StatelessWidget {
  final String title;
  final String hint;
  final Function onTap;

  _SelectItemWidget({
    Key key,
    @required this.title,
    @required this.hint,
    @required this.onTap,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return InkWell(
      child: Container(
        color: Colors.white,
        height: 50.w,
        child: Row(
          children: <Widget>[
            SizedBox(
              width: 100,
              child: Text(
                title,
                textAlign: TextAlign.end,
                style: TextStyle(fontSize: 17),
              ),
            ),
            Expanded(
              child: Text(
                hint,
                style: TextStyle(color: Colors.grey, fontSize: 16),
              ),
            ),
            Icon(
              Icons.keyboard_arrow_right,
              color: Colors.black54,
            ),
          ],
        ),
      ),
      onTap: onTap,
    );
  }
}

class _EditItemWidget extends StatelessWidget {
  final String title;
  final String initial;
  final String hint;
  final Function(String) onChanged;

  _EditItemWidget({
    Key key,
    @required this.title,
    this.initial,
    @required this.hint,
    @required this.onChanged,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.white,
      height: 50.w,
      child: Row(
        children: <Widget>[
          SizedBox(
            width: 100,
            child: Text(
              title,
              textAlign: TextAlign.end,
              style: TextStyle(
                color: Color(0xFF181818),
                fontSize: 17,
              ),
            ),
          ),
          Expanded(
            child: TextFormField(
              initialValue: initial,
              decoration: InputDecoration(
                hintText: hint,
                border: InputBorder.none,
              ),
              onChanged: onChanged,
            ),
          ),
          SizedBox(
            width: 8.w,
          ),
        ],
      ),
    );
  }
}
